<template>
  <div class="assistant">
    <div class="video">
      <div class="videoMenu">
        <el-link :href="'#'+key" v-for="value,key,index in videoList" :key="index">{{key}}</el-link>
      </div>
      <div class="videoContent">
        <div class="item" v-for="value,key,index in videoList" :key="index">
          <el-link :id="key" class="name">{{key}}</el-link>
          <div class="item-list">
            <el-link @click="url=item.url;name=item.name;showModel=true" :underline="false" v-for="(item,index2) in value">{{item.name}}</el-link>
          </div>
        </div>
      </div>
    </div>
    <vxe-modal v-model="showModel" :title="name" height="572" width="830">
      <template #default>
        <video id="video" :src="url" preload="none" controls="controls" height="500px" width="800px"></video>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: '',
        name: '',
        videoList: {
          '权限管理': [
            {
              name: '账号设置',
              url: 'http://39.108.61.54:9000/video/quanxianguanli/1.zhanghaoshezhi.mp4'
            },
            {
              name: '训练中心权限设置',
              url: 'http://39.108.61.54:9000/video/quanxianguanli/2.xunliankequanxian.mp4'
            },
          ],
          '枪支许可': [
            {
              name: '枪支管理权限分配',
              url: 'http://39.108.61.54:9000/video/gun/1.qiangzhiquanxianfeipei.mp4'
            },
            {
              name: '枪支许可内容管理',
              url: 'http://39.108.61.54:9000/video/gun/2.qiangzhineirongguangli.mp4'
            }
          ],
          '教职员管理': [
            {
              name: '教职员新增',
              url: 'http://39.108.61.54:9000/video/jiaolianyuanguanli/1.jiaolianyuanxinzeng.mp4'
            },
            {
              name: '多个教练带一个队伍-教练员操作',
              url: 'http://39.108.61.54:9000/video/zuixin/duogejiaoliandaiygieduiwu-jiaolianzijicaozuo.mp4'
            },
            {
              name: '多个教练带一个队伍-管理员操作',
              url: 'http://39.108.61.54:9000/video/zuixin/duogejiaoliandaiyigeduiwu-guanliyuancaozuo.mp4'
            },
            {
              name: '教职员业务档案填写',
              url: 'http://39.108.61.54:9000/video/jiaolianyuanguanli/jiaozhiyuanyewudangantianxie.mp4'
            },
            {
              name: '说明',
              url: 'http://39.108.61.54:9000/video/zuixin/shuoming.mp4'
            },
          ],
          '运动员管理': [
            {
              name: '运动员新增',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/1.yundongyuanxinzeng.mp4'
            },
            {
              name: '入队申请',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/2.ruduishenqing.mp4'
            },
            {
              name: '进退队审核',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/3.jintuiduishenhe.mp4'
            },
            {
              name: '运动员新增后未找到',
              url: 'http://39.108.61.54:9000/video/zuixin/yundongyuanxinzenghouweizhaodao.mp4'
            },
            {
              name: '运动员转项操作',
              url: 'http://39.108.61.54:9000/video/zuixin/yundongyuanzhuanxiangcaozuo.mp4'
            },
            {
              name: '运动员身份信息修改',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/shenfenxinxixiugai.mp4'
            },
            {
              name: '运动员信息完善',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/4.yundongyuanxinxiwanshan.mp4'
            },
            {
              name: '运动员名单导出打印',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/5.yundongyuanmingdnasousuodaochudayin.mp4'
            },
            {
              name: '运动员档案管理',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/6.yundongyuandoanganguanli.mp4'
            },
            {
              name: '运动成绩添加',
              url: 'http://39.108.61.54:9000/video/zuixin/yundongchengjitianjia.mp4'
            },
            {
              name: '多个教练带同一运动员如何操作',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/duogejiaolianyuandaitongyiduiyuan.mp4'
            },
            {
              name: '出勤表',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/chuqinbiao.mp4'
            },
            {
              name: '运动员信息统计',
              url: 'http://39.108.61.54:9000/video/yundongyuanguanli/yundongyuanxinxitongji.mp4'
            },
          ],
          '大纲考核': [
            {
              name: '考核数据录入',
              url: 'http://39.108.61.54:9000/video/dagangkaohe/1.kaoheshujuluru.mp4'
            },
            {
              name: '考核报告的查询',
              url: 'http://39.108.61.54:9000/video/dagangkaohe/2.kaohebaogaochaxun.mp4'
            },
            {
              name: '大纲考核趋势分析',
              url: 'http://39.108.61.54:9000/video/zuixin/dagangkaohequshifenxi.mp4'
            },
            {
              name: '考核数据修改',
              url: 'http://39.108.61.54:9000/video/dagangkaohe/3.kaoheshujuxiugai.mp4'
            },
            {
              name: '大纲考核汇总表',
              url: 'http://39.108.61.54:9000/video/zuixin/dagangkaohehuizongbiao.mp4'
            },
            {
              name: '大纲考核汇总趋势分析',
              url: 'http://39.108.61.54:9000/video/dagangkaohe/4.dagangkaohehuizongqushifenxi.mp4'
            },
          ],
          '训练计划撰写': [
            {
              name: '全年训练计划撰写',
              url: 'http://39.108.61.54:9000/video/zuixin/quannianxunlianjihua.mp4'
            },
            {
              name: '全年训练周期划分和训练内容安排表',
              url: 'http://39.108.61.54:9000/video/xunlianjihuazhuanxie/2.quannianxunlianzhouqihuafenhexunlianneironganpaibiao.mp4'
            },
            {
              name: '周训练计划',
              url: 'http://39.108.61.54:9000/video/zuixin/zhouxunlianjihua.mp4'
            },
            {
              name: '课时教案',
              url: 'http://39.108.61.54:9000/video/zuixin/keshijiaoan.mp4'
            },
            {
              name: '模板使用说明',
              url: 'http://39.108.61.54:9000/video/xunlianjihuazhuanxie/5.mubanshiyongshuoming.mp4'
            },
            {
              name: '训练计划的查看，修改，删除',
              url: 'http://39.108.61.54:9000/video/xunlianjihuazhuanxie/xunlianjihuadechakan,xiugai,shanchu.mp4'
            },
            {
              name: '周计划和课时计划创建后不见',
              url: 'http://39.108.61.54:9000/video/zuixin/zhoujihuahekeshijiahuachuangjianhoubujian.mp4'
            },
            {
              name: '阶段训练计划表',
              url: 'http://39.108.61.54:9000/video//xunlianjihuazhuanxie/jieduanxunlianjihuabiao.mp4'
            },
            {
              name: '训练计划总结及查看',
              url: 'http://39.108.61.54:9000/video/xunlianjihuazhuanxie/xunlianjihuazongjiejichakan.mp4'
            },
            {
              name: '训练计划撰写',
              url: 'http://39.108.61.54:9000/video/xunlianjihuazhuanxie/xunlianjihuazhanxie.mp4'
            },
          ],
          '指标测量': [
            {
              name: '上肢长',
              url: 'http://39.108.61.54:9000/video/meta_vedio/shangzhichang.mp4'
            },
            {
              name: '前臂长',
              url: 'http://39.108.61.54:9000/video/meta_vedio/qianbichang.mp4'
            },
            {
              name: '肩宽',
              url: 'http://39.108.61.54:9000/video/meta_vedio/jiankuan.mp4'
            },
            {
              name: '上臂紧张围和上臂放松围',
              url: 'http://39.108.61.54:9000/video/meta_vedio/shangbijinzhangfangsong.mp4'
            },
            {
              name: '手长',
              url: 'http://39.108.61.54:9000/video/meta_vedio/shouchang.mp4'
            },
            {
              name: '手宽',
              url: 'http://39.108.61.54:9000/video/meta_vedio/shoukuan.mp4'
            },
            {
              name: '指距',
              url: 'http://39.108.61.54:9000/video/meta_vedio/zhiju.mp4'
            },
            {
              name: '围度的测量(录制中，即将呈现)',
              url: 'http://39.108.61.54:9000/video/meta_vedio/weidudeceliang.mp4'
            },
            {
              name: '踝关节屈伸度(录制中，即将呈现)',
              url: 'http://39.108.61.54:9000/video/meta_vedio/huaiguanjiequshendu.mp4'
            },
            {
              name: '单手举高(手足间距)(录制中，即将呈现)',
              url: 'http://39.108.61.54:9000/video/meta_vedio/danshoujugao.mp4'
            },
            {
              name: '臀厚(录制中，即将呈现)',
              url: 'http://39.108.61.54:9000/video/meta_vedio/tunhou.mp4'
            },
            {
              name: '皮褶厚度',
              url: 'http://39.108.61.54:9000/video/added/pizhehoudu.mp4'
            },
            {
              name: '胸围',
              url: 'http://39.108.61.54:9000/video/added/xiongwei.mp4'
            },
            {
              name: '下肢长H',
              url: 'http://39.108.61.54:9000/video/meta_vedio/xiazhichangH.mp4'
            },
            {
              name: '下肢长A',
              url: 'http://39.108.61.54:9000/video/meta_vedio/xiazhichangA.mp4'
            },
            {
              name: '下肢长B',
              url: 'http://39.108.61.54:9000/video/meta_vedio/xiazhichangB.mp4'
            },
            {
              name: '下肢长C',
              url: 'http://39.108.61.54:9000/video/meta_vedio/xiazhichangC.mp4'
            },
            {
              name: '骨盆宽(髂宽)',
              url: 'http://39.108.61.54:9000/video/meta_vedio/qiakuan.mp4'
            },
            {
              name: '髂前上棘间宽(录制中，即将呈现)',
              url: 'http://39.108.61.54:9000/video/meta_vedio/qiaqianshangjijiankuan.mp4'
            },
            {
              name: '髋宽',
              url: 'http://39.108.61.54:9000/video/meta_vedio/kuankuan.mp4'
            },
            {
              name: '小腿长A',
              url: 'http://39.108.61.54:9000/video/meta_vedio/xiaotuichangA.mp4'
            },
            {
              name: '跟腱长',
              url: 'http://39.108.61.54:9000/video/meta_vedio/genjianchang.mp4'
            },
            {
              name: '足长',
              url: 'http://39.108.61.54:9000/video/meta_vedio/zuchang.mp4'
            },
            {
              name: '足弓类型',
              url: 'http://39.108.61.54:9000/video/added/zugong.mp4'
            },
            {
              name: '脊柱弯曲程度',
              url: 'http://39.108.61.54:9000/video/added/jizhuwanquchengdu.mp4'
            },
          ]
        },
        showModel: false
      }
    },
    watch: {
      showModel(val){
        if(!val){
          let video = document.getElementById('video')
          video.pause();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.assistant{
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
  .video{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .videoMenu{
      width: 20%;
      min-height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .videoContent{
      width: 80%;
      height: 100%;
      padding: 20px;
      overflow: auto;
      .item{
        .name{
          font-size: 20px;
          font-weight: 500;
          margin: 20px 0;
        }
        .item-list{
          border: 1px solid #dddddd;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding: 10px;
          a{
            display: inline-block;
            width: 30%;
            margin: 10px;
          }
        }
      }
    }
  }
}

</style>
